<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>矩形碰撞检测</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <main class="container">
        <header class="page-header">
            <h1>矩形碰撞检测</h1>
        </header>
        <div class="row flex-items-xs-left">
            <canvas class="canvas" width="500" height="500"></canvas>
            <div class="col-xs control-panel">
                <form action="">
                    <div class="form-group">
                        <label for="inputRotate">矩形1 旋转角度: <span id="spanRotate1"></span></label>
                        <input class="form-control" value="0" type="range" min="0" max="360" step="1" id="inputRotate1">
                    </div>

                    <div class="form-group">
                        <label for="inputRotate">矩形2 旋转角度: <span id="spanRotate2"></span></label>
                        <input class="form-control" value="0" type="range" min="0" max="360" step="1" id="inputRotate2">
                    </div>
                </form>
            </div>
        </div>

    </main>

    <!--<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>-->
    <script src="./js/common.js"></script>
    <script src="./js/rectangle.js"></script>
    <script src="./js/overlapTest.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>